<template>
  <el-dialog :title="isEdit?'编辑账户':'新增账户'"
             :visible.sync="dialogForm"
             width="720px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             :rules="rules"
             class="add-form"
             label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户名称"
                        prop="customerId">
            <el-select v-model="form.customerId"
                       placeholder="请选择"
                       :disabled="disabled"
                       clearable>
              <el-option v-for="(item,index) in customList"
                         :key="index"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账户名称"
                        prop="name">
            <el-input v-model="form.name"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="助记码"
                        prop="mnemonicCode">
            <el-input v-model="form.mnemonicCode"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账户类型"
                        prop="accountType">
            <el-select v-model="form.accountType"
                       placeholder="请选择"
                       clearable>
              <el-option v-for="[key, val] in _dictAccountTypes"
                         :key="key"
                         :label="val"
                         :value="key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="账户性质"
                        prop="accountNature">
            <el-select v-model="form.accountNature"
                       placeholder="请选择"
                       clearable>
              <el-option v-for="[key, val] in _dictAccountNature"
                         :key="key"
                         :label="val"
                         :value="key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="逾期类型"
                        prop="overdueType">
            <el-select v-model="form.overdueType"
                       placeholder="请选择"
                       clearable>
              <el-option v-for="[key, val] in _dictOverdueType"
                         :key="key"
                         :label="val"
                         :value="key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="逾期值"
                        prop="overdueValue">
            <el-input v-model="form.overdueValue"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否收转库费"
                        prop="transferFee">
            <el-radio v-model="form.transferFee"
                      :label="true">是</el-radio>
            <el-radio v-model="form.transferFee"
                      :label="false">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报表是否统计"
                        prop="statistics">
            <el-radio v-model="form.statistics"
                      :label="true">是</el-radio>
            <el-radio v-model="form.statistics"
                      :label="false">否</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否托盘账户"
                        prop="pallets">
            <el-radio v-model="form.pallets"
                      :label="true">是</el-radio>
            <el-radio v-model="form.pallets"
                      :label="false">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否钢厂单位"
                        prop="ifSteelMillUnit">
            <el-radio v-model="form.ifSteelMillUnit"
                      :label="true">是</el-radio>
            <el-radio v-model="form.ifSteelMillUnit"
                      :label="false">否</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="附件"
                        prop="attachments">
            <attachments v-model="form.attachments"></attachments>
            <download v-model="form.attachments"></download>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { maxLength, sortLength } from '@/utils/rules'
import { PUBLIC_NUM_CODE, REG_TEXT, PUBLIC_TEL } from '@/utils/Reg'
import attachments from '@/components/file-upload'
import download from '@/components/download'
// 接口
import { addAccount, updateAccount } from '@/api/commerce/account'
import { getCustomList } from '@/api/commerce/customer'

export default {
  name: 'addAccountForm',
  components: {
    attachments,
    download
  },
  data() {
    return {
      form: this.clearForm(),
      disabled: false,
      rules: {
        // areaCode: [
        //   { required: true, validator: PUBLIC_NUM_CODE, trigger: 'blur' },
        //   sortLength
        // ],
        // areaName: [
        //   { required: true, validator: REG_TEXT, trigger: 'blur' },
        //   sortLength
        // ],
        // // storeType: [{ required: true, message: '请选择仓库类型', trigger: 'change' }, sortLength],
        // site: [{ message: '请输入所在地', trigger: 'blur' }, sortLength],
        // tel: [{ validator: PUBLIC_TEL, trigger: 'blur' }, sortLength],
        // contacts: [{ message: '请输入联系人', trigger: 'blur' }, sortLength],
        // remark: [maxLength]
      },
      dialogForm: false,
      isEdit: false,
      customList: []
    }
  },
  mounted() {
    getCustomList().then(res => {
      this.customList = res.data.aaData
    })
  },
  methods: {
    clearForm() {
      return {
        orgId: '',
        orgName: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name,
        name: '',
        mnemonicCode: '',
        ifDelivery: false,
        ifSteelMillUnit: false,
        accountType: '',
        accountNature: '',
        overdueType: '',
        overdueValue: 0,
        pallets: false,
        transferFee: false,
        statistics: false,
        customerId: '',
        customerName: '',
        remark: null,
        attachments: [
          // {
          //   id: 0,
          //   filePath: '',
          //   fileSize: '',
          //   fileType: '',
          //   fileName: ''
          // }
        ]
      }
    },
    // 保存
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.handleToEdit() : this.handleToAdd()
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    },
    // 新增
    handleToAdd() {
      addAccount(this.form).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    // 编辑
    handleToEdit() {
      updateAccount(this.form.id, this.form).then(res => {
        this.$message({ message: '编辑成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    handleCllx(v) {
      if (v === 'JOB_CLLX_HC') {
        this.form.teu = 0
      }
      this.form.typeCode = v
    }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
        this.$emit('clear')
      }
    }
  }
}
</script>

<style scoped>
</style>
